<template>
	<el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
			label-width="120px">
			<el-form-item label="商品名称" prop="skuName">
				<el-autocomplete v-model="dataForm.skuName" :fetch-suggestions="getSkuList" placeholder="请输入商品名称搜索"
					@select="handleSkuChange"></el-autocomplete>
			</el-form-item>
			<el-form-item label="仓库" prop="wareId">
				<el-select v-model="dataForm.wareId" placeholder="请选择仓库" clearable>
					<el-option :label="w.name" :value="w.id" v-for="w in wareList" :key="w.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="库存数" prop="stock">
				<el-input v-model="dataForm.stock" placeholder="库存数"></el-input>
			</el-form-item>

			<el-form-item label="锁定库存" prop="stockLocked">
				<el-input v-model="dataForm.stockLocked" placeholder="锁定库存"></el-input>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="dataFormSubmit()">确定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	export default {
		data() {
			return {
				visible: false,
				wareList: [],
				skuList: [],
				dataForm: {
					id: 0,
					skuId: '',
					wareId: '',
					stock: 0,
					skuName: '',
					stockLocked: 0,
					shopId: sessionStorage.getItem('shopId')
				},
				dataRule: {
					skuId: [{ required: true, message: '商品名称不能为空', trigger: 'blur' }],
					wareId: [
						{ required: true, message: '仓库不能为空', trigger: 'blur' }
					],
					stock: [{ required: true, message: '库存数不能为空', trigger: 'blur' }],
				},
				timeout: null,

			}
		},
		created() {
			this.getWares()
		},
		methods: {
			getWares() {
				this.$http({
					url: this.$http.adornUrl('/ware/wareinfo/list'),
					method: 'get',
					params: this.$http.adornParams({
						page: 1,
						limit: 500,
						shopId: sessionStorage.getItem('shopId')
					})
				}).then(({ data }) => {
					this.wareList = data.page.list
				})
			},
			getSkuList(queryString, cb) {
				this.$http({
					url: this.$http.adornUrl('product/skuinfo/getSkuList/' + sessionStorage.getItem('shopId')),
					method: 'get',
					params: this.$http.adornParams({
						name: queryString
					})
				}).then(({ data }) => {
					this.skuList = data.data
					let results = this.skuList.map(element => {
						element['value'] = element.skuName
						return element
					});
					clearTimeout(this.timeout);
					this.timeout = setTimeout(() => {
						cb(results);
					}, 3000 * Math.random());
				})
			},
			// 添加SKU选择变更处理方法
			handleSkuChange(val) {
				this.dataForm.skuId = val.skuId;
			},


			init(id) {
				this.dataForm.id = id || 0
				this.visible = true
				this.$nextTick(() => {
					this.$refs['dataForm'].resetFields()
					if (this.dataForm.id) {
						this.$http({
							url: this.$http.adornUrl(`/ware/waresku/info/${this.dataForm.id}`),
							method: 'get',
							params: this.$http.adornParams()
						}).then(({ data }) => {
							if (data && data.code === 0) {
								this.dataForm.skuId = data.wareSku.skuId
								this.dataForm.wareId = data.wareSku.wareId
								this.dataForm.stock = data.wareSku.stock
								this.dataForm.skuName = data.wareSku.skuName
								this.dataForm.stockLocked = data.wareSku.stockLocked
							}
						})
					}
				})
			},
			// 表单提交
			dataFormSubmit() {
				this.$refs['dataForm'].validate(valid => {
					if (valid) {
						this.$http({
							url: this.$http.adornUrl(
								`/ware/waresku/${!this.dataForm.id ? 'save' : 'update'}`
							),
							method: 'post',
							data: this.$http.adornData({
								id: this.dataForm.id || undefined,
								skuId: this.dataForm.skuId,
								wareId: this.dataForm.wareId,
								stock: this.dataForm.stock,
								skuName: this.dataForm.skuName,
								stockLocked: this.dataForm.stockLocked,
								shopId: sessionStorage.getItem('shopId')
							})
						}).then(({ data }) => {
							if (data && data.code === 0) {
								this.$message({
									message: '操作成功',
									type: 'success',
									duration: 1500,
									onClose: () => {
										this.visible = false
										this.$emit('refreshDataList')
									}
								})
							} else {
								this.$message.error(data.msg)
							}
						})
					}
				})
			}
		}
	}
</script>